<template>
  <div class="project-detail-container">
    <!-- 顶部导航 -->
    <div class="detail-header">
      <div class="back-button">
        <el-button icon="el-icon-arrow-left" @click="goBack">返回项目列表</el-button>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="editProject">编辑项目</el-button>
      </div>
    </div>
    
    <!-- 项目基本信息 -->
    <div class="project-info-card">
      <div class="project-header">
        <div class="project-title-section">
          <h1 class="project-title">{{ project.name }}</h1>
          <el-tag :type="getStatusType(project.status)" class="status-tag">
            {{ getStatusText(project.status) }}
          </el-tag>
        </div>
        <div class="project-progress">
          <span class="progress-label">项目进度：</span>
          <el-progress 
            :percentage="project.progress" 
            :status="project.progress === 100 ? 'success' : ''"
          ></el-progress>
        </div>
      </div>
      
      <div class="project-meta">
        <div class="meta-item">
          <div class="meta-label">项目经理</div>
          <div class="meta-value">{{ project.manager }}</div>
        </div>
        <div class="meta-item">
          <div class="meta-label">开始日期</div>
          <div class="meta-value">{{ formatDate(project.startDate) }}</div>
        </div>
        <div class="meta-item">
          <div class="meta-label">截止日期</div>
          <div class="meta-value">{{ formatDate(project.endDate) }}</div>
        </div>
        <div class="meta-item">
          <div class="meta-label">项目成员</div>
          <div class="meta-value members-list">
            <el-avatar 
              v-for="(member, index) in project.members" 
              :key="index" 
              size="small"
              :class="{ 'member-avatar': true }"
            >{{ member.charAt(0) }}</el-avatar>
          </div>
        </div>
      </div>
      
      <div class="project-description">
        <div class="description-header">
          <h3>项目描述</h3>
          <div class="speech-controls">
            <el-dropdown @command="handleVoiceCommand" trigger="click">
              <el-button type="text" size="small" icon="el-icon-setting">
                语音设置
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="voice">选择声音</el-dropdown-item>
                  <el-dropdown-item command="rate">调整语速</el-dropdown-item>
                  <el-dropdown-item command="pitch">调整音调</el-dropdown-item>
                  <el-dropdown-item command="volume">调整音量</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button 
              type="text" 
              size="small" 
              @click="speakDescription"
              :disabled="isSpeaking"
              :icon="isSpeaking ? 'el-icon-loading' : 'el-icon-headset'"
            >
              {{ isSpeaking ? '播放中...' : '朗读描述' }}
            </el-button>
            <el-button 
              v-if="isSpeaking" 
              type="text" 
              size="small" 
              @click="stopSpeaking"
              icon="el-icon-close"
            >
              停止
            </el-button>
          </div>
        </div>
        <p>{{ project.description || '暂无项目描述' }}</p>
      </div>
    </div>
    
    <!-- 内容标签页 -->
    <div class="project-tabs-container">
      <el-tabs v-model="activeTab" type="border-card">
        <!-- 任务标签页 -->
        <el-tab-pane label="项目任务" name="tasks">
          <div class="tab-header">
            <div class="view-switcher" v-if="activeTab === 'tasks'">
              <el-radio-group v-model="taskViewMode" size="small">
                <el-radio-button label="table">表格模式</el-radio-button>
                <el-radio-button label="kanban">看板模式</el-radio-button>
              </el-radio-group>
            </div>
            <el-button type="primary" size="small" @click="createTask">添加任务</el-button>
          </div>
          
          <!-- 表格模式 -->
          <el-table v-if="taskViewMode === 'table'" :data="tasks" style="width: 100%">
            <el-table-column prop="name" label="任务名称"></el-table-column>
            <el-table-column prop="assignee" label="负责人"></el-table-column>
            <el-table-column prop="dueDate" label="截止日期"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="getTaskStatusType(scope.row.status)">
                  {{ getTaskStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="priority" label="优先级">
              <template #default="scope">
                <el-tag :type="getPriorityType(scope.row.priority)" size="small">
                  {{ scope.row.priority }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" @click="editTask(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteTask(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 看板模式 -->
          <div v-else class="kanban-container">
            <div class="kanban-board">
              <div v-for="status in taskStatusList" :key="status.value" class="kanban-column">
                <div class="kanban-column-header" :class="`kanban-header-${status.value}`">
                  <h3>{{ status.label }}</h3>
                  <span class="task-count">{{ getTasksByStatus(status.value).length }}</span>
                </div>
                <div 
                  class="kanban-tasks"
                  @dragover.prevent
                  @drop="handleDrop($event, status.value)"
                >
                  <div 
                    v-for="task in getTasksByStatus(status.value)" 
                    :key="task.id" 
                    class="kanban-task-card"
                    draggable="true"
                    @dragstart="handleDragStart($event, task)"
                    @click="editTask(task)"
                  >
                    <div class="task-card-header">
                      <span class="task-name">{{ task.name }}</span>
                      <el-tag :type="getPriorityType(task.priority)" size="small">
                        {{ task.priority }}
                      </el-tag>
                    </div>
                    <div class="task-card-content">
                      <p v-if="task.description" class="task-description">{{ truncateText(task.description, 50) }}</p>
                      <div class="task-meta">
                        <div class="task-assignee">
                          <i class="el-icon-user"></i> {{ task.assignee }}
                        </div>
                        <div class="task-due-date">
                          <i class="el-icon-date"></i> {{ task.dueDate }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="getTasksByStatus(status.value).length === 0" class="empty-column-hint">
                    暂无任务
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空数据提示 -->
          <div v-if="tasks.length === 0" class="empty-data">
            <el-empty description="暂无任务"></el-empty>
          </div>
        </el-tab-pane>
        
        <!-- 文件标签页 -->
        <el-tab-pane label="项目文件" name="files">
          <div class="tab-header">
            <el-button type="primary" size="small" @click="uploadFile">上传文件</el-button>
          </div>
          
          <el-table :data="files" style="width: 100%">
            <el-table-column prop="name" label="文件名"></el-table-column>
            <el-table-column prop="size" label="大小">
              <template #default="scope">
                {{ formatFileSize(scope.row.size) }}
              </template>
            </el-table-column>
            <el-table-column prop="uploadDate" label="上传日期"></el-table-column>
            <el-table-column prop="uploader" label="上传者"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="primary" @click="downloadFile(scope.row)">下载</el-button>
                <el-button size="small" type="danger" @click="deleteFile(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 空数据提示 -->
          <div v-if="files.length === 0" class="empty-data">
            <el-empty description="暂无文件"></el-empty>
          </div>
        </el-tab-pane>
        
        <!-- 讨论标签页 -->
        <el-tab-pane label="项目讨论" name="comments">
          <div class="comments-container">
            <div v-if="comments.length > 0" class="comments-list">
              <div v-for="(comment, index) in comments" :key="index" class="comment-item">
                <div class="comment-header">
                  <div class="comment-user">
                    <el-avatar size="small">{{ comment.user.charAt(0) }}</el-avatar>
                    <span class="comment-username">{{ comment.user }}</span>
                  </div>
                  <div class="comment-time">{{ comment.time }}</div>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-actions">
                  <el-button type="text" size="small" @click="replyToComment(comment)">
                    <i class="el-icon-chat-dot-square"></i> 回复
                  </el-button>
                  <el-button v-if="comment.user === project.manager" type="text" size="small" @click="deleteComment(index)">
                    <i class="el-icon-delete"></i> 删除
                  </el-button>
                </div>
                
                <!-- 评论回复 -->
                <div v-if="comment.replies && comment.replies.length > 0" class="comment-replies">
                  <div v-for="(reply, replyIndex) in comment.replies" :key="replyIndex" class="reply-item">
                    <div class="reply-header">
                      <div class="comment-user">
                        <el-avatar size="small">{{ reply.user.charAt(0) }}</el-avatar>
                        <span class="comment-username">{{ reply.user }}</span>
                      </div>
                      <div class="comment-time">{{ reply.time }}</div>
                    </div>
                    <div class="reply-content">{{ reply.content }}</div>
                    <div class="reply-actions">
                      <el-button v-if="reply.user === project.manager" type="text" size="small" @click="deleteReply(index, replyIndex)">
                        <i class="el-icon-delete"></i> 删除
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 空数据提示 -->
            <div v-else class="empty-data">
              <el-empty description="暂无讨论"></el-empty>
            </div>
            
            <!-- 评论输入框 -->
            <div class="comment-input">
              <el-input
                v-model="newComment"
                type="textarea"
                :rows="3"
                :placeholder="replyMode ? `回复 ${replyToUser}` : '添加讨论...'"
              ></el-input>
              <div class="comment-buttons">
                <el-button v-if="replyMode" size="small" @click="cancelReply">取消回复</el-button>
                <el-button type="primary" size="small" @click="submitComment" :disabled="!newComment.trim()">
                  {{ replyMode ? '回复' : '发表' }}
                </el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 动态标签页 -->
        <el-tab-pane label="项目动态" name="activities">
          <div class="activities-timeline">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.time"
                :type="getActivityType(activity.type)"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
          
          <!-- 空数据提示 -->
          <div v-if="activities.length === 0" class="empty-data">
            <el-empty description="暂无动态"></el-empty>
          </div>
        </el-tab-pane>
        
        <!-- 收款记录标签页 -->
        <el-tab-pane label="收款记录" name="payments">
          <div class="tab-header">
            <div class="payment-summary">
              <div class="summary-item">
                <div class="summary-label">合同总额</div>
                <div class="summary-value">¥{{ formatMoney(project.contractAmount || 0) }}</div>
              </div>
              <div class="summary-item">
                <div class="summary-label">已收款</div>
                <div class="summary-value">¥{{ formatMoney(totalReceivedAmount) }}</div>
              </div>
              <div class="summary-item">
                <div class="summary-label">未收款</div>
                <div class="summary-value">¥{{ formatMoney((project.contractAmount || 0) - totalReceivedAmount) }}</div>
              </div>
              <div class="summary-item">
                <div class="summary-label">收款进度</div>
                <div class="summary-value">
                  <el-progress 
                    :percentage="paymentProgress" 
                    :status="paymentProgress === 100 ? 'success' : ''"
                  ></el-progress>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" @click="createPayment">添加收款</el-button>
          </div>
          
          <el-table :data="payments" style="width: 100%">
            <el-table-column prop="date" label="收款日期" width="120"></el-table-column>
            <el-table-column prop="amount" label="金额" width="120">
              <template #default="scope">
                ¥{{ formatMoney(scope.row.amount) }}
              </template>
            </el-table-column>
            <el-table-column prop="paymentMethod" label="收款方式" width="120"></el-table-column>
            <el-table-column prop="paymentStage" label="收款阶段" width="120"></el-table-column>
            <el-table-column prop="payer" label="付款方" width="120"></el-table-column>
            <el-table-column prop="receiver" label="收款人" width="120"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button size="small" @click="editPayment(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="deletePayment(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 空数据提示 -->
          <div v-if="payments.length === 0" class="empty-data">
            <el-empty description="暂无收款记录"></el-empty>
          </div>
        </el-tab-pane>
        
        <!-- 项目需求标签页 -->
        <el-tab-pane label="项目需求" name="requirements">
          <div class="tab-header">
            <div class="requirement-stats">
              <div class="stat-item">
                <div class="stat-value">{{ requirements.length }}</div>
                <div class="stat-label">需求总数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getRequirementsByStatus('已完成').length }}</div>
                <div class="stat-label">已完成</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getRequirementsByStatus('进行中').length }}</div>
                <div class="stat-label">进行中</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getRequirementsByStatus('待处理').length }}</div>
                <div class="stat-label">待处理</div>
              </div>
            </div>
            <el-button type="primary" size="small" @click="createRequirement">添加需求</el-button>
          </div>
          
          <el-table :data="requirements" style="width: 100%">
            <el-table-column prop="code" label="需求编号" width="120"></el-table-column>
            <el-table-column prop="title" label="需求标题"></el-table-column>
            <el-table-column prop="priority" label="优先级" width="100">
              <template #default="scope">
                <el-tag :type="getPriorityType(scope.row.priority)" size="small">
                  {{ scope.row.priority }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getRequirementStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="proposer" label="提出人" width="120"></el-table-column>
            <el-table-column prop="assignee" label="负责人" width="120"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button size="small" @click="viewRequirement(scope.row)">查看</el-button>
                <el-button size="small" @click="editRequirement(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteRequirement(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 空数据提示 -->
          <div v-if="requirements.length === 0" class="empty-data">
            <el-empty description="暂无需求记录"></el-empty>
          </div>
        </el-tab-pane>
        
        <!-- 项目缺陷标签页 -->
        <el-tab-pane label="项目缺陷" name="bugs">
          <div class="tab-header">
            <div class="bug-stats">
              <div class="stat-item">
                <div class="stat-value">{{ bugs.length }}</div>
                <div class="stat-label">缺陷总数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getBugsByStatus('已解决').length }}</div>
                <div class="stat-label">已解决</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getBugsByStatus('处理中').length }}</div>
                <div class="stat-label">处理中</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getBugsByStatus('待处理').length }}</div>
                <div class="stat-label">待处理</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getBugsBySeverity('严重').length }}</div>
                <div class="stat-label">严重缺陷</div>
              </div>
            </div>
            <el-button type="primary" size="small" @click="createBug">添加缺陷</el-button>
          </div>
          
          <el-table :data="bugs" style="width: 100%">
            <el-table-column prop="code" label="缺陷编号" width="120"></el-table-column>
            <el-table-column prop="title" label="缺陷标题"></el-table-column>
            <el-table-column prop="severity" label="严重程度" width="100">
              <template #default="scope">
                <el-tag :type="getBugSeverityType(scope.row.severity)" size="small">
                  {{ scope.row.severity }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getBugStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reporter" label="报告人" width="120"></el-table-column>
            <el-table-column prop="assignee" label="负责人" width="120"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button size="small" @click="viewBug(scope.row)">查看</el-button>
                <el-button size="small" @click="editBug(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteBug(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 空数据提示 -->
          <div v-if="bugs.length === 0" class="empty-data">
            <el-empty description="暂无缺陷记录"></el-empty>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <!-- 任务对话框 -->
    <el-dialog
      :title="taskDialogType === 'create' ? '添加任务' : '编辑任务'"
      v-model="taskDialogVisible"
      width="50%"
    >
      <el-form :model="taskForm" label-width="100px">
        <el-form-item label="任务名称" required>
          <el-input v-model="taskForm.name"></el-input>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input type="textarea" v-model="taskForm.description"></el-input>
        </el-form-item>
        <el-form-item label="负责人" required>
          <el-select v-model="taskForm.assignee" placeholder="选择负责人">
            <el-option 
              v-for="member in project.members" 
              :key="member" 
              :label="member" 
              :value="member"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="截止日期" required>
          <el-date-picker
            v-model="taskForm.dueDate"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="taskForm.priority" placeholder="选择优先级">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="taskForm.status" placeholder="选择状态">
            <el-option label="待处理" value="todo"></el-option>
            <el-option label="进行中" value="in-progress"></el-option>
            <el-option label="已完成" value="done"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveTask">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 文件上传对话框 -->
    <el-dialog
      title="上传文件"
      v-model="fileDialogVisible"
      width="40%"
    >
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :auto-upload="false"
        :on-change="handleFileChange"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">支持任意类型文件，单个文件不超过10MB</div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="fileDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUpload">上传</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 收款记录对话框 -->
    <el-dialog
      :title="paymentDialogType === 'create' ? '添加收款记录' : '编辑收款记录'"
      v-model="paymentDialogVisible"
      width="50%"
    >
      <el-form :model="paymentForm" label-width="100px">
        <el-form-item label="收款日期" required>
          <el-date-picker
            v-model="paymentForm.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="金额" required>
          <el-input-number 
            v-model="paymentForm.amount" 
            :min="0" 
            :precision="2" 
            :step="1000"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="收款方式" required>
          <el-select v-model="paymentForm.paymentMethod" placeholder="选择收款方式" style="width: 100%">
            <el-option label="银行转账" value="银行转账"></el-option>
            <el-option label="支付宝" value="支付宝"></el-option>
            <el-option label="微信支付" value="微信支付"></el-option>
            <el-option label="现金" value="现金"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款阶段" required>
          <el-select v-model="paymentForm.paymentStage" placeholder="选择收款阶段" style="width: 100%">
            <el-option label="预付款" value="预付款"></el-option>
            <el-option label="进度款" value="进度款"></el-option>
            <el-option label="尾款" value="尾款"></el-option>
            <el-option label="质保金" value="质保金"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款方" required>
          <el-input v-model="paymentForm.payer"></el-input>
        </el-form-item>
        <el-form-item label="收款人" required>
          <el-select v-model="paymentForm.receiver" placeholder="选择收款人" style="width: 100%">
            <el-option 
              v-for="member in project.members" 
              :key="member" 
              :label="member" 
              :value="member"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="paymentForm.remark" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paymentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savePayment">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 需求对话框 -->
    <el-dialog
      :title="requirementDialogType === 'create' ? '添加需求' : (requirementDialogType === 'edit' ? '编辑需求' : '需求详情')"
      v-model="requirementDialogVisible"
      width="60%"
    >
      <el-form :model="requirementForm" label-width="100px" :disabled="requirementDialogType === 'view'">
        <el-form-item label="需求编号" v-if="requirementDialogType !== 'create'">
          <el-input v-model="requirementForm.code" disabled></el-input>
        </el-form-item>
        <el-form-item label="需求标题" required>
          <el-input v-model="requirementForm.title"></el-input>
        </el-form-item>
        <el-form-item label="需求描述" required>
          <el-input type="textarea" v-model="requirementForm.description" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="优先级" required>
          <el-select v-model="requirementForm.priority" placeholder="选择优先级" style="width: 100%">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" required>
          <el-select v-model="requirementForm.status" placeholder="选择状态" style="width: 100%">
            <el-option label="待处理" value="待处理"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="已拒绝" value="已拒绝"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提出人" required>
          <el-select v-model="requirementForm.proposer" placeholder="选择提出人" style="width: 100%">
            <el-option 
              v-for="member in project.members" 
              :key="member" 
              :label="member" 
              :value="member"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" required>
          <el-select v-model="requirementForm.assignee" placeholder="选择负责人" style="width: 100%">
            <el-option 
              v-for="member in project.members" 
              :key="member" 
              :label="member" 
              :value="member"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划完成日期">
          <el-date-picker
            v-model="requirementForm.planFinishDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实际完成日期" v-if="requirementForm.status === '已完成'">
          <el-date-picker
            v-model="requirementForm.actualFinishDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="requirementForm.remark" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="requirementDialogVisible = false">{{ requirementDialogType === 'view' ? '关闭' : '取消' }}</el-button>
          <el-button v-if="requirementDialogType !== 'view'" type="primary" @click="saveRequirement">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 缺陷对话框 -->
    <el-dialog
      :title="bugDialogType === 'create' ? '添加缺陷' : (bugDialogType === 'edit' ? '编辑缺陷' : '缺陷详情')"
      v-model="bugDialogVisible"
      width="60%"
    >
      <el-form :model="bugForm" label-width="100px" :disabled="bugDialogType === 'view'">
        <el-form-item label="缺陷编号" v-if="bugDialogType !== 'create'">
          <el-input v-model="bugForm.code" disabled></el-input>
        </el-form-item>
        <el-form-item label="缺陷标题" required>
          <el-input v-model="bugForm.title"></el-input>
        </el-form-item>
        <el-form-item label="缺陷描述" required>
          <el-input type="textarea" v-model="bugForm.description" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="重现步骤">
          <el-input type="textarea" v-model="bugForm.reproduceSteps" :rows="4" placeholder="请详细描述如何重现此缺陷"></el-input>
        </el-form-item>
        <el-form-item label="严重程度" required>
          <el-select v-model="bugForm.severity" placeholder="选择严重程度" style="width: 100%">
            <el-option label="轻微" value="轻微"></el-option>
            <el-option label="一般" value="一般"></el-option>
            <el-option label="严重" value="严重"></el-option>
            <el-option label="致命" value="致命"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" required>
          <el-select v-model="bugForm.priority" placeholder="选择优先级" style="width: 100%">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" required>
          <el-select v-model="bugForm.status" placeholder="选择状态" style="width: 100%">
            <el-option label="待处理" value="待处理"></el-option>
            <el-option label="处理中" value="处理中"></el-option>
            <el-option label="已解决" value="已解决"></el-option>
            <el-option label="已关闭" value="已关闭"></el-option>
            <el-option label="无法重现" value="无法重现"></el-option>
            <el-option label="不予修复" value="不予修复"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报告人" required>
          <el-select v-model="bugForm.reporter" placeholder="选择报告人" style="width: 100%">
            <el-option 
              v-for="member in project.members" 
              :key="member" 
              :label="member" 
              :value="member"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" required>
          <el-select v-model="bugForm.assignee" placeholder="选择负责人" style="width: 100%">
            <el-option 
              v-for="member in project.members" 
              :key="member" 
              :label="member" 
              :value="member"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划修复日期">
          <el-date-picker
            v-model="bugForm.planFixDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实际修复日期" v-if="bugForm.status === '已解决' || bugForm.status === '已关闭'">
          <el-date-picker
            v-model="bugForm.actualFixDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="解决方案" v-if="bugForm.status === '已解决' || bugForm.status === '已关闭'">
          <el-input type="textarea" v-model="bugForm.solution" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="bugForm.remark" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="bugDialogVisible = false">{{ bugDialogType === 'view' ? '关闭' : '取消' }}</el-button>
          <el-button v-if="bugDialogType !== 'view'" type="primary" @click="saveBug">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 语音设置对话框 -->
    <el-dialog
      v-model="voiceSettingsVisible"
      :title="voiceSettingsTitle"
      width="500px"
    >
      <!-- 选择声音 -->
      <template v-if="voiceSettingsType === 'voice'">
        <p>选择朗读声音：</p>
        <el-select v-model="speechSettings.voice" style="width: 100%">
          <el-option
            v-for="voice in availableVoices"
            :key="voice.name"
            :label="voice.name + ' (' + voice.lang + ')'"
            :value="voice.name"
          ></el-option>
        </el-select>
        <div class="voice-preview">
          <el-button size="small" @click="previewVoice">预览所选声音</el-button>
        </div>
      </template>
      
      <!-- 调整语速 -->
      <template v-if="voiceSettingsType === 'rate'">
        <p>调整语速 (0.1 - 2.0)：</p>
        <div class="slider-container">
          <span class="slider-label">慢</span>
          <el-slider 
            v-model="speechSettings.rate" 
            :min="0.1" 
            :max="2" 
            :step="0.1"
            show-stops
          ></el-slider>
          <span class="slider-label">快</span>
        </div>
        <div class="rate-value">当前值: {{ speechSettings.rate }}</div>
      </template>
      
      <!-- 调整音调 -->
      <template v-if="voiceSettingsType === 'pitch'">
        <p>调整音调 (0.1 - 2.0)：</p>
        <div class="slider-container">
          <span class="slider-label">低</span>
          <el-slider 
            v-model="speechSettings.pitch" 
            :min="0.1" 
            :max="2" 
            :step="0.1"
            show-stops
          ></el-slider>
          <span class="slider-label">高</span>
        </div>
        <div class="pitch-value">当前值: {{ speechSettings.pitch }}</div>
      </template>
      
      <!-- 调整音量 -->
      <template v-if="voiceSettingsType === 'volume'">
        <p>调整音量 (0 - 1.0)：</p>
        <div class="slider-container">
          <span class="slider-label">小</span>
          <el-slider 
            v-model="speechSettings.volume" 
            :min="0" 
            :max="1" 
            :step="0.1"
            show-stops
          ></el-slider>
          <span class="slider-label">大</span>
        </div>
        <div class="volume-value">当前值: {{ speechSettings.volume }}</div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 获取项目ID
const projectId = ref(null)

// 项目数据
const project = ref({
  id: 0,
  name: '',
  description: '',
  manager: '',
  members: [],
  startDate: '',
  endDate: '',
  status: '',
  progress: 0,
  contractAmount: 0
})

// 任务列表
const tasks = ref([
  {
    id: 1,
    name: '需求分析',
    description: '收集并分析用户需求',
    assignee: '张三',
    dueDate: '2023-02-15',
    status: 'done',
    priority: '高'
  },
  {
    id: 2,
    name: '原型设计',
    description: '设计产品原型',
    assignee: '李四',
    dueDate: '2023-03-01',
    status: 'done',
    priority: '中'
  },
  {
    id: 3,
    name: '前端开发',
    description: '实现用户界面',
    assignee: '王五',
    dueDate: '2023-04-15',
    status: 'in-progress',
    priority: '高'
  },
  {
    id: 4,
    name: '后端开发',
    description: '实现业务逻辑和数据处理',
    assignee: '张三',
    dueDate: '2023-04-30',
    status: 'in-progress',
    priority: '高'
  },
  {
    id: 5,
    name: '测试',
    description: '进行功能测试和性能测试',
    assignee: '赵六',
    dueDate: '2023-05-15',
    status: 'todo',
    priority: '中'
  }
])

// 文件列表
const files = ref([
  {
    id: 1,
    name: '需求文档.docx',
    size: 2500000,
    uploadDate: '2023-01-10',
    uploader: '张三'
  },
  {
    id: 2,
    name: '原型设计.sketch',
    size: 8500000,
    uploadDate: '2023-02-05',
    uploader: '李四'
  },
  {
    id: 3,
    name: '项目计划.xlsx',
    size: 1200000,
    uploadDate: '2023-01-15',
    uploader: '张三'
  }
])

// 收款记录列表
const payments = ref([
  {
    id: 1,
    date: '2023-01-20',
    amount: 300000,
    paymentMethod: '银行转账',
    paymentStage: '预付款',
    payer: 'XX科技有限公司',
    receiver: '张三',
    remark: '项目启动预付款'
  },
  {
    id: 2,
    date: '2023-03-15',
    amount: 400000,
    paymentMethod: '银行转账',
    paymentStage: '进度款',
    payer: 'XX科技有限公司',
    receiver: '张三',
    remark: '完成需求分析和原型设计阶段'
  }
])

// 需求列表
const requirements = ref([
  {
    id: 1,
    code: 'REQ-001',
    title: '用户登录功能',
    description: '实现用户登录功能，支持账号密码登录和第三方登录',
    priority: '高',
    status: '已完成',
    proposer: '张三',
    assignee: '李四',
    createTime: '2023-01-20 10:00:00',
    planFinishDate: '2023-02-15',
    actualFinishDate: '2023-02-12',
    remark: '已完成所有登录方式的开发和测试'
  },
  {
    id: 2,
    code: 'REQ-002',
    title: '用户注册功能',
    description: '实现用户注册功能，支持手机号和邮箱注册',
    priority: '高',
    status: '已完成',
    proposer: '张三',
    assignee: '李四',
    createTime: '2023-01-20 10:30:00',
    planFinishDate: '2023-02-20',
    actualFinishDate: '2023-02-18',
    remark: '已完成所有注册方式的开发和测试'
  },
  {
    id: 3,
    code: 'REQ-003',
    title: '个人中心功能',
    description: '实现用户个人中心，包括个人信息管理、密码修改等功能',
    priority: '中',
    status: '进行中',
    proposer: '张三',
    assignee: '王五',
    createTime: '2023-01-25 14:00:00',
    planFinishDate: '2023-03-10',
    actualFinishDate: '',
    remark: '正在开发个人信息管理功能'
  },
  {
    id: 4,
    code: 'REQ-004',
    title: '消息通知功能',
    description: '实现系统消息通知功能，支持站内信、短信和邮件通知',
    priority: '中',
    status: '待处理',
    proposer: '李四',
    assignee: '赵六',
    createTime: '2023-02-05 09:30:00',
    planFinishDate: '2023-03-25',
    actualFinishDate: '',
    remark: '待开发'
  },
  {
    id: 5,
    code: 'REQ-005',
    title: '数据统计分析功能',
    description: '实现数据统计分析功能，支持多维度数据展示和导出',
    priority: '低',
    status: '待处理',
    proposer: '王五',
    assignee: '张三',
    createTime: '2023-02-10 16:00:00',
    planFinishDate: '2023-04-10',
    actualFinishDate: '',
    remark: '待开发'
  }
])

// 缺陷列表
const bugs = ref([
  {
    id: 1,
    code: 'BUG-001',
    title: '登录页面在移动端显示异常',
    description: '登录页面在移动端显示异常，输入框位置错乱',
    reproduceSteps: '1. 使用手机访问登录页面\n2. 查看页面布局',
    severity: '一般',
    priority: '高',
    status: '已解决',
    reporter: '张三',
    assignee: '李四',
    createTime: '2023-02-20 11:30:00',
    planFixDate: '2023-02-25',
    actualFixDate: '2023-02-23',
    solution: '修复了响应式布局问题',
    remark: '已在多种移动设备上测试通过'
  },
  {
    id: 2,
    code: 'BUG-002',
    title: '注册时验证码发送失败',
    description: '用户注册时，点击发送验证码按钮后没有收到验证码',
    reproduceSteps: '1. 进入注册页面\n2. 输入手机号\n3. 点击发送验证码按钮',
    severity: '严重',
    priority: '高',
    status: '已解决',
    reporter: '王五',
    assignee: '李四',
    createTime: '2023-02-22 14:20:00',
    planFixDate: '2023-02-23',
    actualFixDate: '2023-02-22',
    solution: '修复了短信服务配置问题',
    remark: '已测试通过'
  },
  {
    id: 3,
    code: 'BUG-003',
    title: '个人中心头像上传失败',
    description: '在个人中心上传头像时提示"上传失败"',
    reproduceSteps: '1. 登录系统\n2. 进入个人中心\n3. 点击头像进行上传',
    severity: '一般',
    priority: '中',
    status: '处理中',
    reporter: '赵六',
    assignee: '王五',
    createTime: '2023-03-05 10:00:00',
    planFixDate: '2023-03-10',
    actualFixDate: '',
    solution: '',
    remark: '正在排查文件上传服务问题'
  },
  {
    id: 4,
    code: 'BUG-004',
    title: '数据导出Excel格式错误',
    description: '导出的Excel文件打开后显示格式错误',
    reproduceSteps: '1. 进入数据统计页面\n2. 点击导出按钮\n3. 打开导出的Excel文件',
    severity: '轻微',
    priority: '低',
    status: '待处理',
    reporter: '张三',
    assignee: '赵六',
    createTime: '2023-03-08 16:30:00',
    planFixDate: '2023-03-15',
    actualFixDate: '',
    solution: '',
    remark: '待处理'
  },
  {
    id: 5,
    code: 'BUG-005',
    title: '系统在高并发下响应缓慢',
    description: '当同时在线用户超过1000人时，系统响应明显变慢',
    reproduceSteps: '1. 使用压测工具模拟1000+用户同时在线\n2. 观察系统响应时间',
    severity: '严重',
    priority: '高',
    status: '待处理',
    reporter: '李四',
    assignee: '张三',
    createTime: '2023-03-10 09:00:00',
    planFixDate: '2023-03-20',
    actualFixDate: '',
    solution: '',
    remark: '需要优化数据库查询和缓存策略'
  }
])

// 项目动态
const activities = ref([
  {
    type: 'info',
    content: '张三创建了项目',
    time: '2023-01-01 10:00'
  },
  {
    type: 'success',
    content: '李四完成了任务"需求分析"',
    time: '2023-02-15 15:30'
  },
  {
    type: 'warning',
    content: '项目截止日期调整为2023-06-30',
    time: '2023-03-10 09:15'
  },
  {
    type: 'info',
    content: '王五上传了文件"原型设计.sketch"',
    time: '2023-02-05 14:20'
  },
  {
    type: 'success',
    content: '李四完成了任务"原型设计"',
    time: '2023-03-01 16:45'
  }
])

// 任务对话框
const taskDialogVisible = ref(false)
const taskDialogType = ref('create')
const currentTaskId = ref(null)
const taskForm = reactive({
  name: '',
  description: '',
  assignee: '',
  dueDate: '',
  priority: '中',
  status: 'todo'
})

// 文件上传对话框
const fileDialogVisible = ref(false)
const fileList = ref([])

// 语音合成状态
const isSpeaking = ref(false)
const speechSynthesis = window.speechSynthesis
let speechUtterance = null

// 语音设置
const speechSettings = reactive({
  voice: '',
  rate: 1.0,
  pitch: 1.0,
  volume: 1.0
})

// 可用的语音列表
const availableVoices = ref([])

// 语音设置对话框
const voiceSettingsVisible = ref(false)
const voiceSettingsType = ref('')
const voiceSettingsTitle = computed(() => {
  const titles = {
    voice: '选择朗读声音',
    rate: '调整语速',
    pitch: '调整音调',
    volume: '调整音量'
  }
  return titles[voiceSettingsType.value] || '语音设置'
})

// 任务视图模式
const taskViewMode = ref('table')

// 任务状态列表
const taskStatusList = [
  { value: 'todo', label: '待处理' },
  { value: 'in-progress', label: '进行中' },
  { value: 'done', label: '已完成' }
]

// 当前拖拽的任务
const draggedTask = ref(null)

// 项目评论
const comments = ref([
  {
    id: 1,
    user: '张三',
    content: '我已经完成了需求分析文档，请大家查看并提出意见。',
    time: '2023-01-20 10:30:00',
    replies: [
      {
        user: '李四',
        content: '文档很详细，我已经查看完毕，没有问题。',
        time: '2023-01-20 11:15:00'
      },
      {
        user: '王五',
        content: '我有几点建议，稍后我们讨论一下。',
        time: '2023-01-20 14:20:00'
      }
    ]
  },
  {
    id: 2,
    user: '赵六',
    content: '测试环境已经搭建完成，可以开始进行测试了。',
    time: '2023-03-05 16:45:00',
    replies: []
  }
])

// 新评论
const newComment = ref('')

// 回复模式
const replyMode = ref(false)
const replyToCommentData = ref(null)
const replyToUser = ref('')
const replyToIndex = ref(-1)

// 添加标签页相关变量
const activeTab = ref('tasks')

// 收款记录对话框
const paymentDialogVisible = ref(false)
const paymentDialogType = ref('create')
const currentPaymentId = ref(null)
const paymentForm = reactive({
  date: '',
  amount: 0,
  paymentMethod: '银行转账',
  paymentStage: '预付款',
  payer: '',
  receiver: '',
  remark: ''
})

// 需求对话框
const requirementDialogVisible = ref(false)
const requirementDialogType = ref('create')
const currentRequirementId = ref(null)
const requirementForm = reactive({
  code: '',
  title: '',
  description: '',
  priority: '中',
  status: '待处理',
  proposer: '',
  assignee: '',
  planFinishDate: '',
  actualFinishDate: '',
  remark: ''
})

// 缺陷对话框
const bugDialogVisible = ref(false)
const bugDialogType = ref('create')
const currentBugId = ref(null)
const bugForm = reactive({
  code: '',
  title: '',
  description: '',
  reproduceSteps: '',
  severity: '一般',
  priority: '中',
  status: '待处理',
  reporter: '',
  assignee: '',
  planFixDate: '',
  actualFixDate: '',
  solution: '',
  remark: ''
})

// 计算总收款金额
const totalReceivedAmount = computed(() => {
  return payments.value.reduce((sum, payment) => sum + payment.amount, 0)
})

// 计算收款进度
const paymentProgress = computed(() => {
  if (!project.value.contractAmount) return 0
  return Math.min(Math.round((totalReceivedAmount.value / project.value.contractAmount) * 100), 100)
})

onMounted(() => {
  // 从查询参数中获取项目ID
  projectId.value = route.query.id
  if (!projectId.value) {
    ElMessage.error('项目ID不存在')
    goBack()
    return
  }
  
  // 加载项目数据
  loadProjectData()
  
  // 初始化语音列表
  initVoices()
})

// 加载项目数据
const loadProjectData = () => {
  // 模拟从API获取项目数据
  // 实际应用中，这里应该调用API获取项目详情
  setTimeout(() => {
    // 模拟数据
    project.value = {
      id: projectId.value,
      name: '产品重构项目',
      description: '对现有产品进行架构重构，提升性能和用户体验',
      manager: '张三',
      members: ['张三', '李四', '王五', '赵六'],
      startDate: '2023-01-15',
      endDate: '2023-06-30',
      status: 'in-progress',
      progress: 45,
      contractAmount: 1000000
    }
    
    // 初始化任务数据
    tasks.value = [
      {
        id: 1,
        name: '需求分析',
        description: '收集和分析用户需求',
        assignee: '张三',
        dueDate: '2023-02-15',
        status: 'completed',
        priority: '高'
      },
      {
        id: 2,
        name: '架构设计',
        description: '设计系统架构',
        assignee: '李四',
        dueDate: '2023-03-15',
        status: 'completed',
        priority: '高'
      },
      {
        id: 3,
        name: '前端开发',
        description: '实现用户界面',
        assignee: '王五',
        dueDate: '2023-05-15',
        status: 'in-progress',
        priority: '中'
      },
      {
        id: 4,
        name: '后端开发',
        description: '实现服务端逻辑',
        assignee: '赵六',
        dueDate: '2023-05-15',
        status: 'in-progress',
        priority: '中'
      },
      {
        id: 5,
        name: '测试',
        description: '进行系统测试',
        assignee: '张三',
        dueDate: '2023-06-15',
        status: 'to-do',
        priority: '中'
      }
    ]
    
    // 初始化文件数据
    files.value = [
      {
        id: 1,
        name: '需求文档.docx',
        size: 2500000,
        uploadDate: '2023-01-20',
        uploader: '张三'
      },
      {
        id: 2,
        name: '架构设计.pdf',
        size: 5000000,
        uploadDate: '2023-02-10',
        uploader: '李四'
      },
      {
        id: 3,
        name: '项目计划.xlsx',
        size: 1200000,
        uploadDate: '2023-01-25',
        uploader: '张三'
      }
    ]
    
    // 初始化活动数据
    activities.value = [
      {
        type: 'success',
        content: '项目创建成功',
        time: '2023-01-15 09:00:00'
      },
      {
        type: 'info',
        content: '张三上传了文件"需求文档.docx"',
        time: '2023-01-20 14:30:00'
      },
      {
        type: 'info',
        content: '张三上传了文件"项目计划.xlsx"',
        time: '2023-01-25 11:20:00'
      },
      {
        type: 'info',
        content: '李四上传了文件"架构设计.pdf"',
        time: '2023-02-10 16:45:00'
      },
      {
        type: 'success',
        content: '任务"需求分析"已完成',
        time: '2023-02-15 17:00:00'
      },
      {
        type: 'success',
        content: '任务"架构设计"已完成',
        time: '2023-03-15 18:30:00'
      },
      {
        type: 'primary',
        content: '任务"前端开发"已开始',
        time: '2023-03-20 09:15:00'
      },
      {
        type: 'primary',
        content: '任务"后端开发"已开始',
        time: '2023-03-20 09:30:00'
      }
    ]
  }, 500)
}

// 返回项目列表
const goBack = () => {
  router.push('/project')
}

// 编辑项目
const editProject = () => {
  // 跳转到编辑页面或打开编辑对话框
  ElMessage.info('编辑项目功能待实现')
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化金额
const formatMoney = (amount) => {
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

// 获取状态对应的标签类型
const getStatusType = (status) => {
  const statusMap = {
    'pending': 'info',
    'in-progress': 'primary',
    'completed': 'success',
    'paused': 'warning'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待启动',
    'in-progress': '进行中',
    'completed': '已完成',
    'paused': '已暂停'
  }
  return statusMap[status] || '未知状态'
}

// 获取任务状态对应的标签类型
const getTaskStatusType = (status) => {
  const statusMap = {
    'todo': 'info',
    'in-progress': 'primary',
    'done': 'success'
  }
  return statusMap[status] || 'info'
}

// 获取任务状态文本
const getTaskStatusText = (status) => {
  const statusMap = {
    'todo': '待处理',
    'in-progress': '进行中',
    'done': '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 获取优先级对应的标签类型
const getPriorityType = (priority) => {
  const priorityMap = {
    '低': 'info',
    '中': 'warning',
    '高': 'danger'
  }
  return priorityMap[priority] || 'info'
}

// 获取活动类型
const getActivityType = (type) => {
  return type
}

// 创建任务
const createTask = () => {
  taskDialogType.value = 'create'
  currentTaskId.value = null
  // 重置表单
  Object.assign(taskForm, {
    name: '',
    description: '',
    assignee: '',
    dueDate: '',
    priority: '中',
    status: 'todo'
  })
  taskDialogVisible.value = true
}

// 编辑任务
const editTask = (task) => {
  taskDialogType.value = 'edit'
  currentTaskId.value = task.id
  // 填充表单
  Object.assign(taskForm, {
    name: task.name,
    description: task.description,
    assignee: task.assignee,
    dueDate: task.dueDate,
    priority: task.priority,
    status: task.status
  })
  taskDialogVisible.value = true
}

// 删除任务
const deleteTask = (task) => {
  ElMessageBox.confirm(`确定要删除任务"${task.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tasks.value = tasks.value.filter(t => t.id !== task.id)
    ElMessage.success('任务已删除')
    
    // 添加动态
    activities.value.unshift({
      type: 'danger',
      content: `${project.value.manager}删除了任务"${task.name}"`,
      time: new Date().toLocaleString()
    })
  }).catch(() => {
    // 取消操作
  })
}

// 保存任务
const saveTask = () => {
  // 表单验证
  if (!taskForm.name || !taskForm.assignee || !taskForm.dueDate) {
    ElMessage.warning('请填写必填项')
    return
  }

  // 构建任务数据
  const taskData = {
    name: taskForm.name,
    description: taskForm.description,
    assignee: taskForm.assignee,
    dueDate: taskForm.dueDate,
    priority: taskForm.priority,
    status: taskForm.status
  }

  if (taskDialogType.value === 'create') {
    // 创建新任务
    taskData.id = Date.now() // 简单生成ID
    tasks.value.push(taskData)
    ElMessage.success('任务创建成功')
    
    // 添加动态
    activities.value.unshift({
      type: 'info',
      content: `${project.value.manager}创建了任务"${taskData.name}"`,
      time: new Date().toLocaleString()
    })
  } else {
    // 更新现有任务
    const index = tasks.value.findIndex(t => t.id === currentTaskId.value)
    if (index !== -1) {
      taskData.id = currentTaskId.value
      tasks.value[index] = taskData
      ElMessage.success('任务更新成功')
      
      // 添加动态
      activities.value.unshift({
        type: 'warning',
        content: `${project.value.manager}更新了任务"${taskData.name}"`,
        time: new Date().toLocaleString()
      })
    }
  }

  taskDialogVisible.value = false
}

// 上传文件
const uploadFile = () => {
  fileList.value = []
  fileDialogVisible.value = true
}

// 文件变更处理
const handleFileChange = (file) => {
  fileList.value.push(file)
}

// 确认上传
const confirmUpload = () => {
  if (fileList.value.length === 0) {
    ElMessage.warning('请选择要上传的文件')
    return
  }
  
  // 模拟上传
  fileList.value.forEach(file => {
    const fileData = {
      id: Date.now(),
      name: file.name,
      size: file.size,
      uploadDate: formatDate(new Date()),
      uploader: project.value.manager
    }
    files.value.push(fileData)
    
    // 添加动态
    activities.value.unshift({
      type: 'info',
      content: `${project.value.manager}上传了文件"${fileData.name}"`,
      time: new Date().toLocaleString()
    })
  })
  
  ElMessage.success('文件上传成功')
  fileDialogVisible.value = false
}

// 下载文件
const downloadFile = (file) => {
  // 模拟下载
  ElMessage.success(`开始下载文件：${file.name}`)
}

// 删除文件
const deleteFile = (file) => {
  ElMessageBox.confirm(`确定要删除文件"${file.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    files.value = files.value.filter(f => f.id !== file.id)
    ElMessage.success('文件已删除')
    
    // 添加动态
    activities.value.unshift({
      type: 'danger',
      content: `${project.value.manager}删除了文件"${file.name}"`,
      time: new Date().toLocaleString()
    })
  }).catch(() => {
    // 取消操作
  })
}

// 初始化语音列表
const initVoices = () => {
  // 检查浏览器是否支持语音合成
  if (!('speechSynthesis' in window)) {
    ElMessage.warning('您的浏览器不支持语音合成功能')
    return
  }
  
  // 获取可用的语音
  const loadVoices = () => {
    const voices = speechSynthesis.getVoices()
    if (voices.length > 0) {
      availableVoices.value = voices
      // 默认选择中文语音，如果没有则选择第一个
      const chineseVoice = voices.find(voice => voice.lang.includes('zh'))
      speechSettings.voice = chineseVoice ? chineseVoice.name : voices[0].name
    }
  }
  
  // Chrome需要等待voiceschanged事件
  if (speechSynthesis.onvoiceschanged !== undefined) {
    speechSynthesis.onvoiceschanged = loadVoices
  }
  
  // 立即尝试加载一次
  loadVoices()
}

// 处理语音设置命令
const handleVoiceCommand = (command) => {
  voiceSettingsType.value = command
  voiceSettingsVisible.value = true
}

// 预览所选声音
const previewVoice = () => {
  const testText = '这是一段测试语音，用于预览所选声音效果。'
  const utterance = new SpeechSynthesisUtterance(testText)
  
  // 设置所选声音
  const selectedVoice = availableVoices.value.find(voice => voice.name === speechSettings.voice)
  if (selectedVoice) {
    utterance.voice = selectedVoice
  }
  
  utterance.lang = 'zh-CN'
  utterance.rate = speechSettings.rate
  utterance.pitch = speechSettings.pitch
  utterance.volume = speechSettings.volume
  
  speechSynthesis.speak(utterance)
}

// 朗读项目描述
const speakDescription = () => {
  if (!project.value.description) {
    ElMessage.warning('没有可朗读的项目描述')
    return
  }
  
  if (isSpeaking.value) {
    return
  }
  
  isSpeaking.value = true
  
  // 创建语音合成实例
  speechUtterance = new SpeechSynthesisUtterance(project.value.description)
  
  // 设置所选声音
  const selectedVoice = availableVoices.value.find(voice => voice.name === speechSettings.voice)
  if (selectedVoice) {
    speechUtterance.voice = selectedVoice
  }
  
  // 设置语音参数
  speechUtterance.lang = 'zh-CN'
  speechUtterance.rate = speechSettings.rate
  speechUtterance.pitch = speechSettings.pitch
  speechUtterance.volume = speechSettings.volume
  
  // 语音结束事件
  speechUtterance.onend = () => {
    isSpeaking.value = false
  }
  
  // 语音错误事件
  speechUtterance.onerror = (event) => {
    console.error('语音合成错误:', event)
    ElMessage.error('语音合成失败')
    isSpeaking.value = false
  }
  
  // 开始朗读
  speechSynthesis.speak(speechUtterance)
  
  // 添加动态
  activities.value.unshift({
    type: 'info',
    content: `${project.value.manager}使用了语音朗读功能`,
    time: new Date().toLocaleString()
  })
}

// 停止朗读
const stopSpeaking = () => {
  if (speechSynthesis) {
    speechSynthesis.cancel()
    isSpeaking.value = false
  }
}

// 组件卸载时停止语音
onBeforeUnmount(() => {
  if (speechSynthesis && speechSynthesis.speaking) {
    speechSynthesis.cancel()
  }
})

// 获取任务列表
const getTasksByStatus = (status) => {
  return tasks.value.filter(task => task.status === status)
}

// 截断文本
const truncateText = (text, maxLength) => {
  if (!text) return ''
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
}

// 开始拖拽
const handleDragStart = (event, task) => {
  draggedTask.value = task
  // 设置拖拽效果
  event.dataTransfer.effectAllowed = 'move'
  // 添加一些数据到拖拽对象
  event.dataTransfer.setData('text/plain', task.id)
  
  // 添加拖拽样式
  event.target.classList.add('dragging')
  
  // 拖拽结束时移除样式
  event.target.addEventListener('dragend', () => {
    event.target.classList.remove('dragging')
  }, { once: true })
}

// 处理放置
const handleDrop = (event, newStatus) => {
  event.preventDefault()
  
  // 如果没有拖拽的任务或状态相同，则不处理
  if (!draggedTask.value || draggedTask.value.status === newStatus) {
    return
  }
  
  // 更新任务状态
  const taskIndex = tasks.value.findIndex(t => t.id === draggedTask.value.id)
  if (taskIndex !== -1) {
    const oldStatus = tasks.value[taskIndex].status
    
    // 更新任务状态
    tasks.value[taskIndex].status = newStatus
    
    // 添加动态
    activities.value.unshift({
      type: 'primary',
      content: `${project.value.manager}将任务"${draggedTask.value.name}"从${getTaskStatusText(oldStatus)}移动到${getTaskStatusText(newStatus)}`,
      time: new Date().toLocaleString()
    })
    
    // 显示成功消息
    ElMessage.success(`任务"${draggedTask.value.name}"已移动到${getTaskStatusText(newStatus)}`)
  }
  
  // 重置拖拽任务
  draggedTask.value = null
}

// 回复评论
const replyToComment = (comment) => {
  replyMode.value = true
  replyToCommentData.value = comment
  replyToUser.value = comment.user
  replyToIndex.value = comments.value.findIndex(c => c.id === comment.id)
  // 滚动到评论输入框
  setTimeout(() => {
    document.querySelector('.comment-input').scrollIntoView({ behavior: 'smooth' })
  }, 100)
}

// 取消回复
const cancelReply = () => {
  replyMode.value = false
  replyToCommentData.value = null
  replyToUser.value = ''
  replyToIndex.value = -1
  newComment.value = ''
}

// 提交评论
const submitComment = () => {
  if (!newComment.value.trim()) return
  
  const now = new Date().toLocaleString()
  
  if (replyMode.value && replyToIndex.value !== -1) {
    // 添加回复
    if (!comments.value[replyToIndex.value].replies) {
      comments.value[replyToIndex.value].replies = []
    }
    
    comments.value[replyToIndex.value].replies.push({
      user: project.value.manager,
      content: newComment.value,
      time: now
    })
    
    // 添加动态
    activities.value.unshift({
      type: 'info',
      content: `${project.value.manager}回复了${replyToUser.value}的评论`,
      time: now
    })
    
    // 重置回复状态
    cancelReply()
  } else {
    // 添加新评论
    comments.value.unshift({
      id: Date.now(),
      user: project.value.manager,
      content: newComment.value,
      time: now,
      replies: []
    })
    
    // 添加动态
    activities.value.unshift({
      type: 'info',
      content: `${project.value.manager}发表了新评论`,
      time: now
    })
    
    // 清空输入框
    newComment.value = ''
  }
  
  ElMessage.success('评论发表成功')
}

// 删除评论
const deleteComment = (index) => {
  ElMessageBox.confirm('确定要删除这条评论吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    comments.value.splice(index, 1)
    ElMessage.success('评论已删除')
  }).catch(() => {
    // 取消操作
  })
}

// 删除回复
const deleteReply = (commentIndex, replyIndex) => {
  ElMessageBox.confirm('确定要删除这条回复吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    comments.value[commentIndex].replies.splice(replyIndex, 1)
    ElMessage.success('回复已删除')
  }).catch(() => {
    // 取消操作
  })
}

// 创建收款记录
const createPayment = () => {
  paymentDialogType.value = 'create'
  currentPaymentId.value = null
  // 重置表单
  Object.assign(paymentForm, {
    date: '',
    amount: 0,
    paymentMethod: '银行转账',
    paymentStage: '预付款',
    payer: '',
    receiver: '',
    remark: ''
  })
  paymentDialogVisible.value = true
}

// 编辑收款记录
const editPayment = (payment) => {
  paymentDialogType.value = 'edit'
  currentPaymentId.value = payment.id
  // 填充表单
  Object.assign(paymentForm, {
    date: payment.date,
    amount: payment.amount,
    paymentMethod: payment.paymentMethod,
    paymentStage: payment.paymentStage,
    payer: payment.payer,
    receiver: payment.receiver,
    remark: payment.remark
  })
  paymentDialogVisible.value = true
}

// 删除收款记录
const deletePayment = (payment) => {
  ElMessageBox.confirm(`确定要删除收款记录吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    payments.value = payments.value.filter(p => p.id !== payment.id)
    ElMessage.success('收款记录已删除')
  }).catch(() => {
    // 取消操作
  })
}

// 保存收款记录
const savePayment = () => {
  // 表单验证
  if (!paymentForm.date || !paymentForm.amount || !paymentForm.payer || !paymentForm.receiver) {
    ElMessage.warning('请填写必填项')
    return
  }

  // 构建收款记录数据
  const paymentData = {
    date: paymentForm.date,
    amount: paymentForm.amount,
    paymentMethod: paymentForm.paymentMethod,
    paymentStage: paymentForm.paymentStage,
    payer: paymentForm.payer,
    receiver: paymentForm.receiver,
    remark: paymentForm.remark
  }

  if (paymentDialogType.value === 'create') {
    // 创建新收款记录
    paymentData.id = Date.now() // 简单生成ID
    payments.value.push(paymentData)
    ElMessage.success('收款记录创建成功')
    
    // 添加动态
    activities.value.unshift({
      type: 'info',
      content: `${project.value.manager}创建了收款记录`,
      time: new Date().toLocaleString()
    })
  } else {
    // 更新现有收款记录
    const index = payments.value.findIndex(p => p.id === currentPaymentId.value)
    if (index !== -1) {
      paymentData.id = currentPaymentId.value
      payments.value[index] = paymentData
      ElMessage.success('收款记录更新成功')
      
      // 添加动态
      activities.value.unshift({
        type: 'warning',
        content: `${project.value.manager}更新了收款记录`,
        time: new Date().toLocaleString()
      })
    }
  }

  paymentDialogVisible.value = false
}

// 创建需求
const createRequirement = () => {
  requirementDialogType.value = 'create'
  currentRequirementId.value = null
  // 重置表单
  Object.assign(requirementForm, {
    code: '',
    title: '',
    description: '',
    priority: '中',
    status: '待处理',
    proposer: project.value.manager,
    assignee: '',
    planFinishDate: '',
    actualFinishDate: '',
    remark: ''
  })
  requirementDialogVisible.value = true
}

// 查看需求
const viewRequirement = (requirement) => {
  requirementDialogType.value = 'view'
  currentRequirementId.value = requirement.id
  // 填充表单
  Object.assign(requirementForm, {
    code: requirement.code,
    title: requirement.title,
    description: requirement.description,
    priority: requirement.priority,
    status: requirement.status,
    proposer: requirement.proposer,
    assignee: requirement.assignee,
    planFinishDate: requirement.planFinishDate,
    actualFinishDate: requirement.actualFinishDate,
    remark: requirement.remark
  })
  requirementDialogVisible.value = true
}

// 编辑需求
const editRequirement = (requirement) => {
  requirementDialogType.value = 'edit'
  currentRequirementId.value = requirement.id
  // 填充表单
  Object.assign(requirementForm, {
    code: requirement.code,
    title: requirement.title,
    description: requirement.description,
    priority: requirement.priority,
    status: requirement.status,
    proposer: requirement.proposer,
    assignee: requirement.assignee,
    planFinishDate: requirement.planFinishDate,
    actualFinishDate: requirement.actualFinishDate,
    remark: requirement.remark
  })
  requirementDialogVisible.value = true
}

// 删除需求
const deleteRequirement = (requirement) => {
  ElMessageBox.confirm(`确定要删除需求"${requirement.title}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    requirements.value = requirements.value.filter(r => r.id !== requirement.id)
    ElMessage.success('需求已删除')
    
    // 添加动态
    activities.value.unshift({
      type: 'danger',
      content: `${project.value.manager}删除了需求"${requirement.title}"`,
      time: new Date().toLocaleString()
    })
  }).catch(() => {
    // 取消操作
  })
}

// 保存需求
const saveRequirement = () => {
  // 表单验证
  if (!requirementForm.title || !requirementForm.description || !requirementForm.proposer || !requirementForm.assignee) {
    ElMessage.warning('请填写必填项')
    return
  }

  // 构建需求数据
  const requirementData = {
    title: requirementForm.title,
    description: requirementForm.description,
    priority: requirementForm.priority,
    status: requirementForm.status,
    proposer: requirementForm.proposer,
    assignee: requirementForm.assignee,
    planFinishDate: requirementForm.planFinishDate,
    actualFinishDate: requirementForm.actualFinishDate,
    remark: requirementForm.remark
  }

  if (requirementDialogType.value === 'create') {
    // 创建新需求
    requirementData.id = Date.now() // 简单生成ID
    requirementData.code = `REQ-${String(requirements.value.length + 1).padStart(3, '0')}`
    requirementData.createTime = new Date().toLocaleString()
    requirements.value.push(requirementData)
    ElMessage.success('需求创建成功')
    
    // 添加动态
    activities.value.unshift({
      type: 'info',
      content: `${project.value.manager}创建了需求"${requirementData.title}"`,
      time: new Date().toLocaleString()
    })
  } else {
    // 更新现有需求
    const index = requirements.value.findIndex(r => r.id === currentRequirementId.value)
    if (index !== -1) {
      requirementData.id = currentRequirementId.value
      requirementData.code = requirements.value[index].code
      requirementData.createTime = requirements.value[index].createTime
      requirements.value[index] = requirementData
      ElMessage.success('需求更新成功')
      
      // 添加动态
      activities.value.unshift({
        type: 'warning',
        content: `${project.value.manager}更新了需求"${requirementData.title}"`,
        time: new Date().toLocaleString()
      })
    }
  }

  requirementDialogVisible.value = false
}

// 按状态获取需求
const getRequirementsByStatus = (status) => {
  return requirements.value.filter(r => r.status === status)
}

// 获取需求状态对应的标签类型
const getRequirementStatusType = (status) => {
  const statusMap = {
    '待处理': 'info',
    '进行中': 'primary',
    '已完成': 'success',
    '已拒绝': 'danger'
  }
  return statusMap[status] || 'info'
}

// 创建缺陷
const createBug = () => {
  bugDialogType.value = 'create'
  currentBugId.value = null
  // 重置表单
  Object.assign(bugForm, {
    code: '',
    title: '',
    description: '',
    reproduceSteps: '',
    severity: '一般',
    priority: '中',
    status: '待处理',
    reporter: project.value.manager,
    assignee: '',
    planFixDate: '',
    actualFixDate: '',
    solution: '',
    remark: ''
  })
  bugDialogVisible.value = true
}

// 查看缺陷
const viewBug = (bug) => {
  bugDialogType.value = 'view'
  currentBugId.value = bug.id
  // 填充表单
  Object.assign(bugForm, {
    code: bug.code,
    title: bug.title,
    description: bug.description,
    reproduceSteps: bug.reproduceSteps,
    severity: bug.severity,
    priority: bug.priority,
    status: bug.status,
    reporter: bug.reporter,
    assignee: bug.assignee,
    planFixDate: bug.planFixDate,
    actualFixDate: bug.actualFixDate,
    solution: bug.solution,
    remark: bug.remark
  })
  bugDialogVisible.value = true
}

// 编辑缺陷
const editBug = (bug) => {
  bugDialogType.value = 'edit'
  currentBugId.value = bug.id
  // 填充表单
  Object.assign(bugForm, {
    code: bug.code,
    title: bug.title,
    description: bug.description,
    reproduceSteps: bug.reproduceSteps,
    severity: bug.severity,
    priority: bug.priority,
    status: bug.status,
    reporter: bug.reporter,
    assignee: bug.assignee,
    planFixDate: bug.planFixDate,
    actualFixDate: bug.actualFixDate,
    solution: bug.solution,
    remark: bug.remark
  })
  bugDialogVisible.value = true
}

// 删除缺陷
const deleteBug = (bug) => {
  ElMessageBox.confirm(`确定要删除缺陷"${bug.title}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    bugs.value = bugs.value.filter(b => b.id !== bug.id)
    ElMessage.success('缺陷已删除')
    
    // 添加动态
    activities.value.unshift({
      type: 'danger',
      content: `${project.value.manager}删除了缺陷"${bug.title}"`,
      time: new Date().toLocaleString()
    })
  }).catch(() => {
    // 取消操作
  })
}

// 保存缺陷
const saveBug = () => {
  // 表单验证
  if (!bugForm.title || !bugForm.description || !bugForm.reporter || !bugForm.assignee) {
    ElMessage.warning('请填写必填项')
    return
  }

  // 构建缺陷数据
  const bugData = {
    title: bugForm.title,
    description: bugForm.description,
    reproduceSteps: bugForm.reproduceSteps,
    severity: bugForm.severity,
    priority: bugForm.priority,
    status: bugForm.status,
    reporter: bugForm.reporter,
    assignee: bugForm.assignee,
    planFixDate: bugForm.planFixDate,
    actualFixDate: bugForm.actualFixDate,
    solution: bugForm.solution,
    remark: bugForm.remark
  }

  if (bugDialogType.value === 'create') {
    // 创建新缺陷
    bugData.id = Date.now() // 简单生成ID
    bugData.code = `BUG-${String(bugs.value.length + 1).padStart(3, '0')}`
    bugData.createTime = new Date().toLocaleString()
    bugs.value.push(bugData)
    ElMessage.success('缺陷创建成功')
    
    // 添加动态
    activities.value.unshift({
      type: 'info',
      content: `${project.value.manager}创建了缺陷"${bugData.title}"`,
      time: new Date().toLocaleString()
    })
  } else {
    // 更新现有缺陷
    const index = bugs.value.findIndex(b => b.id === currentBugId.value)
    if (index !== -1) {
      bugData.id = currentBugId.value
      bugData.code = bugs.value[index].code
      bugData.createTime = bugs.value[index].createTime
      bugs.value[index] = bugData
      ElMessage.success('缺陷更新成功')
      
      // 添加动态
      activities.value.unshift({
        type: 'warning',
        content: `${project.value.manager}更新了缺陷"${bugData.title}"`,
        time: new Date().toLocaleString()
      })
    }
  }

  bugDialogVisible.value = false
}

// 按状态获取缺陷
const getBugsByStatus = (status) => {
  return bugs.value.filter(b => b.status === status)
}

// 按严重程度获取缺陷
const getBugsBySeverity = (severity) => {
  return bugs.value.filter(b => b.severity === severity)
}

// 获取缺陷状态对应的标签类型
const getBugStatusType = (status) => {
  const statusMap = {
    '待处理': 'info',
    '处理中': 'primary',
    '已解决': 'success',
    '已关闭': 'success',
    '无法重现': 'warning',
    '不予修复': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取缺陷严重程度对应的标签类型
const getBugSeverityType = (severity) => {
  const severityMap = {
    '轻微': 'info',
    '一般': 'warning',
    '严重': 'danger',
    '致命': 'danger'
  }
  return severityMap[severity] || 'info'
}
</script>

<style scoped>
.project-detail-container {
  padding: 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.project-info-card,
.project-tasks-card,
.project-files-card,
.project-activities-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.project-title-section {
  display: flex;
  align-items: center;
}

.project-title {
  margin: 0;
  margin-right: 10px;
}

.status-tag {
  font-size: 14px;
}

.project-progress {
  display: flex;
  align-items: center;
  width: 300px;
}

.progress-label {
  margin-right: 10px;
  white-space: nowrap;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 0;
}

.meta-item {
  flex: 1;
  min-width: 200px;
  margin-bottom: 10px;
}

.meta-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.meta-value {
  font-size: 16px;
  color: #303133;
}

.members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.member-avatar {
  background-color: #409EFF;
  color: white;
}

.project-description {
  margin-bottom: 20px;
}

.description-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.description-header h3 {
  margin: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h2 {
  margin: 0;
}

.empty-tasks,
.empty-files,
.empty-activities {
  padding: 30px 0;
}

.activities-timeline {
  padding: 10px 0;
}

.speech-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.slider-container {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.slider-label {
  width: 30px;
  text-align: center;
  color: #909399;
}

.rate-value,
.pitch-value,
.volume-value {
  text-align: center;
  margin-top: 10px;
  color: #409EFF;
  font-weight: bold;
}

.voice-preview {
  margin-top: 20px;
  text-align: center;
}

.task-actions {
  display: flex;
  align-items: center;
}

.kanban-container {
  overflow-x: auto;
  padding-bottom: 10px;
}

.kanban-board {
  display: flex;
  min-height: 400px;
  gap: 15px;
}

.kanban-column {
  flex: 1;
  min-width: 280px;
  background-color: #f5f7fa;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.kanban-column-header {
  padding: 12px 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-header-todo {
  background-color: #e6f1fc;
  color: #409eff;
}

.kanban-header-in-progress {
  background-color: #e6f7ff;
  color: #1890ff;
}

.kanban-header-done {
  background-color: #e7f6e7;
  color: #52c41a;
}

.kanban-column-header h3 {
  margin: 0;
  font-size: 16px;
}

.task-count {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
}

.kanban-tasks {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.kanban-task-card {
  background-color: white;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none; /* 防止拖拽时选中文本 */
}

.kanban-task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.kanban-task-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* 拖拽目标区域高亮 */
.kanban-tasks.drag-over {
  background-color: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

.task-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.task-name {
  font-weight: bold;
  font-size: 14px;
  flex: 1;
  margin-right: 8px;
}

.task-description {
  font-size: 12px;
  color: #606266;
  margin: 0 0 8px 0;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.task-assignee, .task-due-date {
  display: flex;
  align-items: center;
}

.task-assignee i, .task-due-date i {
  margin-right: 4px;
}

.empty-column-hint {
  text-align: center;
  padding: 20px 0;
  color: #909399;
  font-size: 14px;
}

.project-comments-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.comments-container {
  padding: 10px 0;
}

.comments-list {
  margin-bottom: 20px;
}

.comment-item {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-user {
  display: flex;
  align-items: center;
}

.comment-username {
  margin-left: 10px;
  font-weight: bold;
}

.comment-time {
  color: #909399;
  font-size: 12px;
}

.comment-content {
  line-height: 1.6;
  margin-bottom: 10px;
  word-break: break-word;
}

.comment-actions {
  display: flex;
  gap: 10px;
}

.comment-replies {
  margin-top: 15px;
  margin-left: 20px;
  padding-left: 15px;
  border-left: 2px solid #ebeef5;
}

.reply-item {
  padding: 10px 0;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.reply-content {
  line-height: 1.6;
  margin-bottom: 8px;
  word-break: break-word;
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
}

.comment-input {
  margin-top: 20px;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.comment-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  gap: 10px;
}

.empty-comments {
  padding: 30px 0;
}

/* 添加标签页相关样式 */
.project-tabs-container {
  margin-bottom: 20px;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.view-switcher {
  margin-right: 10px;
}

.empty-data {
  padding: 30px 0;
  text-align: center;
}

.payment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.summary-item {
  flex: 1;
  min-width: 150px;
}

.summary-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.summary-value {
  font-size: 16px;
  color: #303133;
  font-weight: bold;
}

.requirement-stats,
.bug-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.stat-item {
  flex: 1;
  min-width: 100px;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style> 